<template>
    <div class="container body_bg">
        <div class="serch">
            <p class="pric" @click="pric"></p>
            <input type="text" placeholder="请输入游戏名称" v-model="text">
        </div>

        <div class="serch_data">
            <ul>
                <li v-for="(item, index) in booles()" :key="index" @click="toList">
                    <div class="img"><img :src="item.game_image_url" alt=""></div>
                    <div class="title">{{ item.name }}</div>
                    <div class="next"></div>
                </li>
            </ul>
        </div>

        <div class="centerc" v-if="getShow">
            <div class="like">5173热搜</div>
            <ul>
                <li v-for="(item, index) in gameName" :key="index">
                    <div class="left" v-for="(i, v) in item" :key="v">{{ i.gameName }}</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { getSerchData } from "../assets/api/home.js";
export default {
    data() {
        return {
            gameName: null,
            text: "",
            gameData: null,
            homeGameData: null,
        };
    },
    methods: {
        getSerchDataFun() {
            getSerchData().then((data => {
                console.log(data.data);
                this.gameName = data.data
            }))
        },
        pric() {
            this.$router.go(-1)
        },
        toList() {
            console.log(1);
            this.$router.push({
                path: "/Details",
                query: {
                    titel: this.booles()
                }
            })
        },
        booles() {

            if (this.text == "") {
                return;
            } else if (this.text != "") {

                return this.homeGameData.filter(item => {
                    if (item.name.indexOf(this.text) != -1) {
                        return item;
                    }

                })

            }
        }
    },
    computed: {

        "getShow"() {
            if (this.text == "") {
                return true
            } else {
                return false
            }

        }
    },

    created() {
        this.getSerchDataFun()
        if (window.localStorage.getItem("gameData")) {
            this.homeGameData = JSON.parse(window.localStorage.getItem("gameData"));
        }
        console.log(this.homeGameData, "2222");
    }
}
</script>

<style lang="scss">
@import "../assets/css/base.css";

.body_bg {
    background-color: #f1f1f1;
    height: 100vh;
}

.serch {
    height: 54px;
    background-color: #f1f1f1;
    display: flex;
    justify-items: center;
    align-items: center;

    .pric {
        width: 17px;
        height: 17px;
        background: url(../assets/img/left.png) no-repeat center center;
        background-size: 100%;
        margin: 0px 10px;
    }

    input {
        height: 37px;
        background: url(../assets/img/下载.png)no-repeat 0 center;
        background-size: 10%;
        background-color: #ffffff;
        border: none;
        border-radius: 4px;
        padding-left: 32px;
        flex: 1;
        margin-right: 10px;
    }

    p {
        width: 63px;
        height: 37px;
        text-align: center;
        line-height: 37px;
        color: #fe6320;
        font-size: 14px;
    }
}

.list_data {
    height: 20%;
}

.serch_data {
    background-color: #fff;

    ul {
        width: 100%;

        li {
            border: 1px solid #f1f1f1;
            display: flex;
            margin-top: 10px;
            padding-left: 20px;
            align-items: center;

            .img {
                width: 49px;
                border-radius: 8px;
                height: 49px;

                img {
                    border-radius: 8px;
                }
            }

            .title {
                height: 69px;
                line-height: 69px;
                padding-left: 30px;
                width: 120px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .next {
                width: 144px;
                height: 69px;
                background: url(../assets/img/mbgmes-ico.png)no-repeat 100% center;
                background-size: 10px 20px;
            }
        }
    }
}

.centerc {
    height: 375px;
    background-color: #fff;

    .like {
        width: 345px;
        height: 53px;
        line-height: 53px;
        margin: 0 auto;
        font-size: 13px;
        color: #909195;
        border-bottom: 1px solid #efefef;
    }

    ul {
        width: 345px;
        margin: 0 auto;

        li {
            height: 53px;
            display: flex;
            border-bottom: 1px solid #efefef;
            position: relative;

            &::after {
                content: "";
                height: 27px;
                width: 2px;
                background-color: #e9e9e9;
                position: absolute;
                right: 50%;
                top: 50%;
                transform: translateY(-50%);

            }

            .left {
                width: 50%;
                line-height: 53px;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;

            }
        }
    }
}
</style>